<template>
  <view class="content">
    <view class="tab">
      <view
        :class="{ active: activeTab === '未使用' }"
        @click="activeTab = '未使用'"
        >未使用</view
      >
      <view
        :class="{ active: activeTab === '已使用' }"
        @click="activeTab = '已使用'"
        >已使用</view
      >
      <view
        :class="{ active: activeTab === '已过期' }"
        @click="activeTab = '已过期'"
        >已过期</view
      >
    </view>
    <view class="no"> 暂无优惠卷 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "未使用",
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 0px);
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  .tab {
    display: flex;
    height: 80rpx;
    align-items: center;
    background: #fff;
    view {
      margin: 0 10rpx;
      height: 100%;
      line-height: 80rpx;
      transition: color 0.3s, border-bottom 0.3s;
    }
  }
  .no {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.active {
  color: #28a745;
  border-bottom: 1px solid #28a745;
}
</style>
